<template>
  <div class="pagebody">
    <StickHead></StickHead>
    <div class="headtop bgfff text-al-center fz30">问题反映</div>
    <div class="formbox">
      <div class="label fz22 mb20">
        <span class="fz18 colorF90000">*</span>请选择企业
      </div>
      <van-field
        readonly
        clickable
        label="企业"
        :value="value"
        placeholder="请选择企业"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="entcolumns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <div class="label fz22 mb20 mt20">
        <span class="fz18 colorF90000">*</span>请输入标题
      </div>
      <van-field
        v-model="form.title"
        name="标题"
        label="标题"
        placeholder="请输入标题,不超过20字"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <div class="label fz22 mb20 mt20">
        <span class="fz18 colorF90000">*</span>请选择问题类型
      </div>
      <ul class="typebox flex-wrap justify-start">
        <li
          class="fz24"
          @click="chosentype(item)"
          :class="item.dictSort == istype ? 'active' : ''"
          v-for="item in problemType"
          :key="item.dictValue"
        >
          {{ item.dictLabel }}
        </li>
      </ul>
      <div class="label fz22 mb20 mt20">
        <span class="fz18 colorF90000">*</span>请输入详细内容
      </div>
      <textarea
        class="textarea borderbox fz28"
        v-model="form.content"
        name="详细内容"
        placeholder="请输入详细内容(200字内)"
        id=""
        cols="30"
        rows="10"
      ></textarea>

      <div class="label fz22 mb20 mt20">上传图片</div>
      <van-uploader
        :after-read="afterRead"
        accept="image/*"
        v-model="imgarr"
        multiple
      />

      <div class="submit fz34" @click="submit">立即提交</div>
    </div>
    <StickFoot :type="'index'"></StickFoot>
  </div>
</template>

<script>
import StickHead from "@/layout/StickHead.vue";
import { Toast  } from "vant";
import StickFoot from "@/layout/StickFoot.vue";
import axios from "axios";
import { getDict, getenterpriseList, addquestion, uploadImg } from "@/api/api";
import request from "@/utils/request";
export default {
  name: "Problem",
  components: {
    StickHead,
    StickFoot,
    request
  },

  data() {
    return {
      value: "",
      istype: 0,
      showPicker: false,
      enterpriseList: [],
      entcolumns: [],
      problemType: [],
      imgarr: [],
      form: {
        enterpriseId: null,
        title: "",
        type: null,
        attachFileList: [],
        content: "",
      },
      files:[]
    };
  },
  mounted() {
    this.getenterprise();
    this.getDictList();
  },
  methods: {
    getDictList() {
      let data = {
        pageNum: 1,
        pageSize: 20,
        dictType: "question_type",
      };
      //获取字典数据
      getDict(data).then((response) => {
        this.problemType = response.data.rows;
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    chosentype(item) {
      this.istype = item.dictSort;
      this.form.type = item.dictValue;
    },
    afterRead(file) {
      const formdata = new FormData(); //new一个FormData
      formdata.append("file", file.file); //把上传的图片信息放入，传给后台
      axios
        .post(request.defaults.baseURL+"common/upload", formdata, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          // 处理响应数据
          let imgobj = {
            fileClass: "01",
            url: response.data.fileName,
            fileName: response.data.fileName,
            name: response.data.newFileName,
          };

          this.form.attachFileList.push(imgobj);
        })
        .catch((error) => {
          // 处理错误情况
        });
    },
    getenterprise() {
      getenterpriseList().then((response) => {
        this.enterpriseList = response.data.rows;
        this.enterpriseList.forEach((element) => {
          this.entcolumns.push(element.enterpriseName);
        });
      });
    },
    submit() {
      let enterpriseitem = this.enterpriseList.find(
        (item) => item.enterpriseName === this.value
      );
      if (enterpriseitem) {
        this.form.enterpriseId = enterpriseitem.id;
      }
      if (this.rules(this.form)) {
        Toast.fail("请将填写完整信息");
        return;
      } else {
        addquestion(this.form).then((response) => {
          Toast.success("操作成功");
          this.$router.push({ name: "index" });
        });
      }

      // 提交表单
    },
    rules(obj) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] === null || obj[key] === undefined || obj[key] === "") {
            return true;
          }
        }
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  font-size: 0.28rem;
}
::v-deep .van-uploader__upload {
  background: #fff;
}
.pagebody {
  background-color: #f6f8fb;
  .headtop {
    line-height: 0.8rem;
    height: 0.8rem;
  }
  .formbox {
    padding: 0.2rem 0.2rem 2rem;
    .typebox {
      li {
        margin-right: 0.1rem;
        line-height: 0.5rem;
        height: 0.5rem;
        padding: 0 0.16rem;
        border-radius: 0.2rem;
        background: #dadcdf;
        margin-bottom: 0.2rem;
        color: #666;
      }
      .active {
        color: #3399ff;
        background: #fff;
      }
    }
    .textarea {
      width: -webkit-fill-available;
      height: 3rem;
      background: #fff;
      border: none;
      padding: 0.24rem;
    }
    .hide_file {
      display: none;
    }
    // ````````````

    .camera {
      position: relative;
      z-index: 2;
      margin-bottom: 0.1rem;
      width: 1.5rem;
      height: 1.5rem;
      background: #e7e7e7;
      border-radius: 0.06rem;
      text-align: center;
      .bigImg {
        width: 1.5rem;
        height: 1.5rem;
      }
      .el-icon-camera {
        font-size: 0.45rem;
      }
      // .icon {
      //   width: 0.4rem;
      //   margin-top: 0.4rem;
      // }
      .text {
        display: block;
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: #999;
      }
    }
    // ````````````
    .submit {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      border: 2px solid #fff;
      color: #fff;
      border-radius: 0.7rem;
      background: #3399ff;
      margin-top: 0.2rem;
    }
  }
}
</style>